<template>
  <view class="container">
    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <text class="loading-text">加载比赛信息中...</text>
    </view>
    
    <!-- 比赛信息卡片 -->
    <view class="match-info-card" v-if="matchInfo && !loading">
      <!-- 顶部时间和地点信息 -->
      <view class="match-header">
        <view class="time-venue-info">
          <text class="match-time">{{ formatTimeOnly(matchInfo.matchTime) }}</text>
          <text class="match-venue">比赛场地</text>
        </view>
        <view class="match-type-tag">
          <text class="match-type-text">{{ matchInfo.matchType.name }}</text>
        </view>
      </view>
      
      <!-- 对战信息 -->
      <view class="teams-battle">
        <view class="team-info" @click="goToTeamDetail(matchInfo.homeTeam)">
          <image 
            class="team-logo" 
            :src="getTeamLogo(matchInfo.homeTeam.logo)" 
            mode="aspectFit"
            @error="onImageError"
          ></image>
          <text class="team-name">{{ matchInfo.homeTeam.name }}</text>
        </view>
        
        <view class="battle-center">
          <text class="score">{{ matchInfo.homeScore || 0 }}</text>
          <text class="vs-text">VS</text>
          <text class="score">{{ matchInfo.awayScore || 0 }}</text>
        </view>
        
        <view class="team-info" @click="goToTeamDetail(matchInfo.awayTeam)">
          <image 
            class="team-logo" 
            :src="getTeamLogo(matchInfo.awayTeam.logo)" 
            mode="aspectFit"
            @error="onImageError"
          ></image>
          <text class="team-name">{{ matchInfo.awayTeam.name }}</text>
        </view>
      </view>
      
      <!-- 比赛状态 -->
      <view class="match-footer">
        <view class="status-section">
          <text class="status-text">{{ (matchInfo.status && matchInfo.status.text) || '未开始' }}</text>
        </view>
      </view>
    </view>

    <!-- 预约表单 -->
    <view class="form-section">
      <view class="form-title">预约信息</view>
      
      <view class="form-item">
        <view class="form-label">
          <text class="label-text">姓名</text>
          <text class="required-star">*</text>
        </view>
        <input 
          class="form-input"
          type="text"
          v-model="formData.name"
          placeholder="请输入您的真实姓名"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <view class="form-label">
          <text class="label-text">身份证号</text>
          <text class="required-star">*</text>
        </view>
        <input 
          class="form-input"
          type="text"
          v-model="formData.idCard"
          placeholder="请输入18位身份证号码"
          maxlength="18"
        />
      </view>
      
      <view class="form-item">
        <view class="form-label">
          <text class="label-text">手机号码</text>
          <text class="required-star">*</text>
        </view>
        <input 
          class="form-input"
          type="number"
          v-model="formData.phone"
          placeholder="请输入11位手机号码"
          maxlength="11"
        />
      </view>
      
      <view class="form-tips">
        <text class="tips-text">* 请确保信息准确，用于入场验证</text>
      </view>
    </view>

    <!-- 预约须知 -->
    <view class="notice-section">
      <view class="notice-title">预约须知</view>
      <view class="notice-content">
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">请提前30分钟到达现场，凭二维码入场</text>
        </view>
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">一人一码，不得转让他人使用</text>
        </view>
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">比赛开始后停止入场，请合理安排时间</text>
        </view>
        <view class="notice-item">
          <text class="notice-dot">•</text>
          <text class="notice-text">如需取消预约，请提前2小时联系客服</text>
        </view>
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="submit-section">
      <button 
        class="submit-btn"
        :class="{ disabled: !canSubmit }"
        @click="submitReservation"
        :disabled="!canSubmit || submitting"
      >
        <text class="submit-text">{{ submitting ? '预约中...' : '确认预约' }}</text>
      </button>
    </view>

    <!-- 二维码弹窗 -->
    <view class="qrcode-modal" v-if="showQRCode" @click="closeQRCode">
      <view class="qrcode-content" @click.stop>
        <view class="qrcode-header">
          <text class="qrcode-title">预约成功</text>
          <text class="iconfont icon-close" @click="closeQRCode"></text>
        </view>
        
        <view class="qrcode-body">
          <view class="success-icon">
            <text class="iconfont icon-success"></text>
          </view>
          
          <view class="qrcode-section">
            <text class="qrcode-label">入场二维码</text>
            <view class="qrcode-container">
              <image 
                class="qrcode-image" 
                :src="qrcodeUrl" 
                mode="aspectFit"
              ></image>
            </view>
          </view>
          
          <view class="reservation-info">
            <view class="info-item">
              <text class="info-label">预约编号：</text>
              <text class="info-value">{{ reservationCode }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">预约人：</text>
              <text class="info-value">{{ formData.name }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">手机号：</text>
              <text class="info-value">{{ hidePhone(formData.phone) }}</text>
            </view>
          </view>
          
          <view class="qrcode-tips">
            <text class="tips-text">请截图保存或直接出示此页面入场</text>
          </view>
        </view>
        
        <view class="qrcode-footer">
          <button class="save-btn" @click="saveQRCode">保存到相册</button>
          <button class="confirm-btn" @click="closeQRCode">我知道了</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMatchDetail, submitReservation } from '@/api/cunba.js'

export default {
  data() {
    return {
      matchId: null,
      matchInfo: null,
      formData: {
        name: '',
        idCard: '',
        phone: ''
      },
      submitting: false,
      showQRCode: false,
      qrcodeUrl: '',
      reservationCode: '',
      loading: false
    }
  },
  
  computed: {
    canSubmit() {
      const { name, idCard, phone } = this.formData
      return name.trim() && idCard.trim() && phone.trim() && 
             this.isValidIdCard(idCard) && this.isValidPhone(phone)
    }
  },
  
  onLoad(options) {
    console.log('=== 预约页面启动 ===')
    console.log('URL参数:', options)
    
    // 优先检查全局状态中的比赛数据（来自赛程页面）
    const app = getApp()
    const globalMatch = app.globalData && app.globalData.currentMatch
    console.log('全局比赛数据:', globalMatch)
    
    if (options.matchId) {
      this.matchId = options.matchId
      
      // 方式1：优先使用全局状态的数据（赛程页面传递方式）
      if (globalMatch && globalMatch.id == options.matchId) {
        console.log('使用全局状态数据（来自赛程页面）')
        this.loadMatchInfoFromGlobal(globalMatch)
        return
      }
      
      // 方式2：检查URL参数是否包含完整信息（首页传递方式）
      if (this.hasCompleteMatchData(options)) {
        console.log('使用URL参数数据（来自首页）')
        this.loadMatchInfoFromParams(options)
        return
      }
      
      // 方式3：只有matchId，通过API获取
      console.log('只有matchId，通过API获取数据')
      this.loadMatchInfo()
    } else {
      // 没有matchId，使用默认演示数据
      console.log('没有matchId参数，使用默认数据')
      this.matchId = 'demo'
      this.loadMatchInfo()
    }
  },
  
  methods: {
    // 检查是否有完整的比赛数据
    hasCompleteMatchData(options) {
      return options.homeTeamName && options.awayTeamName && options.matchTime
    },
    
    // 从全局状态加载比赛信息（赛程页面传递方式）
    loadMatchInfoFromGlobal(globalMatch) {
      console.log('从全局状态加载比赛信息:', globalMatch)
      
      try {
        this.loading = true
        
        // 直接使用全局状态的比赛数据，格式化为预约页面需要的格式
        this.matchInfo = this.formatMatchData(globalMatch)
        
        console.log('从全局状态格式化的比赛信息:', this.matchInfo)
        this.loading = false
        
        // 显示成功提示
        uni.showToast({
          title: `${this.matchInfo.homeTeam.name} VS ${this.matchInfo.awayTeam.name}`,
          icon: 'success',
          duration: 2000
        })
        
        // 清除全局状态（避免影响下次使用）
        const app = getApp()
        if (app.globalData) {
          app.globalData.currentMatch = null
        }
        
      } catch (error) {
        console.error('从全局状态加载比赛信息失败:', error)
        this.loading = false
        // 降级到API加载或默认数据
        this.loadMatchInfo()
      }
    },
    
    // 从传递的参数中加载比赛信息（首页传递方式）
    loadMatchInfoFromParams(options) {
      console.log('从参数中加载比赛信息:', options)
      
      try {
        this.loading = true
        
        // 直接从传递的参数构建比赛信息
        this.matchInfo = {
          id: options.matchId,
          matchTime: options.matchTime,
          venue: options.venue || "村BA球馆",
          location: options.venue || "村BA球馆", 
          city: options.city || "贵阳市",
          homeScore: parseInt(options.homeScore) || 0,
          awayScore: parseInt(options.awayScore) || 0,
          status: options.status || "未开始",
          matchType: {
            id: 1,
            name: "村BA争霸赛",
            code: "championship"
          },
          homeTeam: {
            id: options.homeTeamId || 1,
            name: options.homeTeamName || "主队",
            logo: options.homeTeamLogo || "/static/images/team.png"
          },
          awayTeam: {
            id: options.awayTeamId || 2,
            name: options.awayTeamName || "客队", 
            logo: options.awayTeamLogo || "/static/images/team.png"
          }
        }
        
        console.log('从参数构建的比赛信息:', this.matchInfo)
        this.loading = false
        
        // 显示成功提示
        uni.showToast({
          title: `${this.matchInfo.homeTeam.name} VS ${this.matchInfo.awayTeam.name}`,
          icon: 'success',
          duration: 2000
        })
        
      } catch (error) {
        console.error('从参数加载比赛信息失败:', error)
        this.loading = false
        // 降级到API加载或默认数据
        this.loadMatchInfo()
      }
    },
    
    // 加载比赛信息
    async loadMatchInfo() {
      try {
        this.loading = true
        console.log('开始加载比赛信息，matchId:', this.matchId)
        
        // 首先尝试从全局状态获取真实比赛数据
        const app = getApp()
        const currentMatch = app.globalData && app.globalData.currentMatch
        
        if (currentMatch && currentMatch.id == this.matchId) {
          // 使用传递过来的真实比赛数据
          console.log('使用传递的真实比赛数据:', currentMatch)
          this.matchInfo = this.formatMatchData(currentMatch)
          console.log('格式化后的比赛信息:', this.matchInfo)
        } else {
          // 如果没有传递的数据，则尝试调用API
          console.log('没有传递的比赛数据，尝试调用API')
          
          if (this.matchId && this.matchId !== 'demo') {
            try {
              const result = await getMatchDetail(this.matchId)
              
              if (result.code === 0 && result.data) {
                // 格式化API返回的数据
                this.matchInfo = {
                  id: result.data.id,
                  matchTime: result.data.match_time,
                  venue: result.data.location || "待定",
                  location: result.data.remark || "村BA球馆",
                  city: result.data.city || "重庆市",
                  homeScore: result.data.team1_score || 0,
                  awayScore: result.data.team2_score || 0,
                  status: {
                    code: result.data.status_code || 'upcoming',
                    text: result.data.status || "未开始",
                    statusClass: result.data.status_class || 'status-upcoming'
                  },
                  matchType: {
                    id: result.data.event_id || 1,
                    name: result.data.event_name || "村BA争霸赛",
                    code: "championship"
                  },
                  homeTeam: {
                    id: result.data.team1_id,
                    name: result.data.team1_name,
                    logo: result.data.team1_logo || "/static/images/team.png"
                  },
                  awayTeam: {
                    id: result.data.team2_id,
                    name: result.data.team2_name,
                    logo: result.data.team2_logo || "/static/images/team.png"
                  }
                }
                console.log('API数据加载成功:', this.matchInfo)
              } else {
                console.log('API返回数据无效，使用默认数据')
                this.setDefaultMatchInfo()
              }
            } catch (apiError) {
              console.log('API调用失败，使用默认数据:', apiError)
              this.setDefaultMatchInfo()
            }
          } else {
            // 使用默认数据
            console.log('使用默认数据')
            this.setDefaultMatchInfo()
          }
        }
        
        console.log('最终比赛信息:', this.matchInfo)
      } catch (error) {
        console.error('加载比赛信息出错:', error)
        this.setDefaultMatchInfo()
      } finally {
        this.loading = false
      }
    },
    
    // 格式化从不同来源传递的比赛数据
    formatMatchData(match) {
      console.log('formatMatchData 输入数据:', match)
      
      // 处理比赛时间
      let matchTime = match.time || match.match_time || match.matchTime
      if (!matchTime) {
        const now = new Date()
        matchTime = now.toISOString().replace('T', ' ').split('.')[0]
      }
      
      // 处理比赛状态
      let status = match.status
      if (typeof status === 'string') {
        status = {
          code: 'upcoming',
          text: status,
          statusClass: 'status-upcoming'
        }
      } else if (!status || typeof status !== 'object') {
        status = {
          code: 'upcoming',
          text: '未开始',
          statusClass: 'status-upcoming'
        }
      }
      
      // 处理比分数据
      const homeScore = match.homeScore || match.score?.homeScore || match.team1_score || 0
      const awayScore = match.awayScore || match.score?.awayScore || match.team2_score || 0
      
      const formatted = {
        id: match.id,
        matchTime: matchTime,
        venue: match.venue || match.location || "村BA球馆",
        location: match.location || match.venue || "村BA球馆",
        city: match.city || "贵阳市",
        homeScore: homeScore,
        awayScore: awayScore,
        status: status,
        matchType: {
          id: match.matchType?.id || match.event_id || 1,
          name: match.matchType?.name || match.event_name || "村BA争霸赛",
          code: match.matchType?.code || "championship"
        },
        homeTeam: {
          id: match.homeTeam?.id || match.team1_id || 1,
          name: match.homeTeam?.name || match.team1_name || "主队",
          logo: this.getTeamLogo(match.homeTeam?.logo || match.team1_logo)
        },
        awayTeam: {
          id: match.awayTeam?.id || match.team2_id || 2,
          name: match.awayTeam?.name || match.team2_name || "客队",
          logo: this.getTeamLogo(match.awayTeam?.logo || match.team2_logo)
        }
      }
      
      console.log('formatMatchData 输出数据:', formatted)
      return formatted
    },
    
    // 设置默认比赛信息
    setDefaultMatchInfo() {
      this.matchInfo = {
        id: this.matchId,
        matchTime: "2024-12-20 10:30:00",
        venue: "黔西县篮球场",
        location: "村BA球馆",
        city: "重庆市",
        homeScore: 0,
        awayScore: 0,
        status: {
          code: 'upcoming',
          text: '未开始',
          statusClass: 'status-upcoming'
        },
        matchType: {
          id: 1,
          name: "村BA争霸赛",
          code: "championship"
        },
        homeTeam: {
          id: 5,
          name: "兴仁布依族队",
          logo: "/static/images/team.png"
        },
        awayTeam: {
          id: 6,
          name: "福泉山水队",
          logo: "/static/images/team.png"
        }
      }
      console.log('设置默认比赛信息:', this.matchInfo)
    },
    
    // 提交预约
    async submitReservation() {
      if (!this.canSubmit || this.submitting) return
      
      try {
        this.submitting = true
        
        // 验证表单
        if (!this.validateForm()) {
          return
        }
        
        // 模拟加载过程
        await this.mockApiCall()
        
        // 生成预约码
        this.reservationCode = this.generateReservationCode()
        
        // 使用指定的二维码图片
        this.qrcodeUrl = 'https://cdn.zhzfpn.cn/PicGo/20250903113454004.png'
        
        // 显示二维码
        this.showQRCode = true
        
        uni.showToast({
          title: '预约成功',
          icon: 'success'
        })
        
      } catch (error) {
        this.showError('预约失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    
    // 表单验证
    validateForm() {
      const { name, idCard, phone } = this.formData
      
      if (!name.trim()) {
        this.showError('请输入姓名')
        return false
      }
      
      if (!idCard.trim()) {
        this.showError('请输入身份证号')
        return false
      }
      
      if (!this.isValidIdCard(idCard)) {
        this.showError('请输入正确的身份证号')
        return false
      }
      
      if (!phone.trim()) {
        this.showError('请输入手机号')
        return false
      }
      
      if (!this.isValidPhone(phone)) {
        this.showError('请输入正确的手机号')
        return false
      }
      
      return true
    },
    
    // 验证身份证号
    isValidIdCard(idCard) {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      return reg.test(idCard)
    },
    
    // 验证手机号
    isValidPhone(phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(phone)
    },
    
    // 格式化日期时间
    formatDateTime(dateTime) {
      const date = new Date(dateTime)
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${month}月${day}日 ${hours}:${minutes}`
    },
    
    // 格式化时间（仅显示时间）
    formatTimeOnly(dateTime) {
      if (!dateTime) {
        return '待定'
      }
      
      const date = new Date(dateTime)
      
      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        console.warn('无效的日期时间:', dateTime)
        return '待定'
      }
      
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${hours}:${minutes}`
    },
    
    // 隐藏手机号中间4位
    hidePhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    
    // 生成预约码
    generateReservationCode() {
      const timestamp = Date.now()
      const random = Math.floor(Math.random() * 10000)
      return `CBA${timestamp.toString().slice(-6)}${random.toString().padStart(4, '0')}`
    },
    
    // 生成二维码（使用本地图片）
    generateQRCode() {
      // 使用本地二维码图片
      return 'https://cdn.zhzfpn.cn/PicGo/20250831222155402.png'
    },
    
    // 模拟API调用
    mockApiCall() {
      return new Promise(resolve => {
        // 显示加载提示
        uni.showLoading({
          title: '提交中...'
        })
        
        // 延迟2秒，模拟网络请求
        setTimeout(() => {
          // 隐藏加载提示
          uni.hideLoading()
          resolve()
        }, 2000)
      })
    },
    
    // 关闭二维码弹窗
    closeQRCode() {
      this.showQRCode = false
      // 预约成功后返回上一页
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 300) // 延迟300ms让弹窗关闭动画完成
    },
    
    // 保存二维码到相册
    async saveQRCode() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '保存中...'
        })
        
        // 模拟保存延迟
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 隐藏加载提示
        uni.hideLoading()
        
        // 显示成功提示
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
      } catch (error) {
        this.showError('保存失败，请重试')
      }
    },
    
    // 显示错误信息
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    },
    
    // 跳转到球队详情页面
    goToTeamDetail(team) {
      if (!team || !team.id) {
        this.showError('球队信息不完整')
        return
      }
      
      uni.navigateTo({
        url: `/pages/cunba/team_detail/index?teamId=${team.id}&teamName=${encodeURIComponent(team.name)}`
      })
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 获取球队头像
    getTeamLogo(logo) {
      if (logo && logo.trim()) {
        // 如果是完整的URL，直接返回
        if (logo.startsWith('http://') || logo.startsWith('https://')) {
          return logo
        }
        // 如果是相对路径，确保以/开头
        if (!logo.startsWith('/')) {
          return '/' + logo
        }
        return logo
      }
      // 默认头像
      return '/static/images/team.png'
    },
    
    // 图片加载失败处理
    onImageError(e) {
      console.log('图片加载失败:', e)
      // 可以在这里设置默认图片
      e.target.src = '/static/images/team.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 加载状态
.loading-container {
  padding: 60rpx 32rpx;
  text-align: center;
  
  .loading-text {
    font-size: 28rpx;
    color: #666;
  }
}

// 比赛信息卡片
.match-info-card {
  margin: 24rpx;
  padding: 0;
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    background: #f8f9fa;
    border-bottom: 1rpx solid #e9ecef;
    
    .time-venue-info {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .match-time {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
      
      .match-venue {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .match-type-tag {
      .match-type-text {
        padding: 8rpx 16rpx;
        background: #4285f4;
        color: white;
        font-size: 24rpx;
        border-radius: 20rpx;
        font-weight: 500;
      }
    }
  }
  
  .teams-battle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    
    .team-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16rpx;
      border-radius: 16rpx;
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        background: rgba(66, 133, 244, 0.1);
        transform: translateY(-2rpx);
      }
      
      &:active {
        transform: translateY(0);
        background: rgba(66, 133, 244, 0.2);
      }
      
      .team-logo {
        width: 100rpx;
        height: 100rpx;
        border-radius: 16rpx;
        margin-bottom: 12rpx;
        border: 2rpx solid #f0f0f0;
        transition: all 0.3s ease;
      }
      
      .team-name {
        font-size: 24rpx;
        color: #333;
        text-align: center;
        font-weight: 500;
        max-width: 120rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: color 0.3s ease;
      }
    }
    
    .battle-center {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      margin: 0 32rpx;
      
      .score {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        min-width: 60rpx;
        text-align: center;
      }
      
      .vs-text {
        font-size: 24rpx;
        font-weight: 500;
        color: #999;
        margin: 0 16rpx;
      }
    }
  }
  
  .match-footer {
    padding: 24rpx 32rpx;
    background: #f8f9fa;
    border-top: 1rpx solid #e9ecef;
    text-align: center;
    
    .status-section {
      .status-text {
        font-size: 28rpx;
        color: #666;
        font-weight: 500;
      }
    }
  }
}

// 表单区域
.form-section {
  margin: 0 24rpx 24rpx;
  padding: 32rpx;
  background: white;
  border-radius: 24rpx;
  
  .form-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 32rpx;
  }
  
  .form-item {
    margin-bottom: 32rpx;
    
    .form-label {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .label-text {
        font-size: 28rpx;
        color: #333;
      }
      
      .required-star {
        color: #ff4757;
        margin-left: 8rpx;
      }
    }
    
    .form-input {
      width: 100%;
      height: 88rpx;
      padding: 0 24rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      font-size: 28rpx;
      background: #fafafa;
      
      &:focus {
        border-color: #ff6b35;
        background: white;
      }
    }
  }
  
  .form-tips {
    .tips-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

// 预约须知
.notice-section {
  margin: 0 24rpx 24rpx;
  padding: 32rpx;
  background: white;
  border-radius: 24rpx;
  
  .notice-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
  }
  
  .notice-content {
    .notice-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16rpx;
      
      .notice-dot {
        color: #ff6b35;
        margin-right: 12rpx;
        margin-top: 4rpx;
      }
      
      .notice-text {
        flex: 1;
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}

// 确认按钮
.submit-section {
  padding: 32rpx 24rpx;
  
  .submit-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-radius: 44rpx;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.disabled {
      background: #ccc;
    }
    
    .submit-text {
      font-size: 32rpx;
      color: white;
      font-weight: bold;
    }
  }
}

// 二维码弹窗
.qrcode-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  
  .qrcode-content {
    width: 100%;
    max-width: 640rpx;
    background: white;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease;
    
    .qrcode-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      border-bottom: 1rpx solid #eee;
      background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
      
      .qrcode-title {
        font-size: 36rpx;
        font-weight: bold;
        color: white;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      }
      
      .iconfont {
        font-size: 36rpx;
        color: white;
        opacity: 0.8;
        
        &:active {
          opacity: 1;
        }
      }
    }
    
    .qrcode-body {
      padding: 32rpx;
      text-align: center;
      
      .success-icon {
        margin-bottom: 24rpx;
        
        .iconfont {
          font-size: 120rpx;
          color: #52c41a;
          text-shadow: 0 4rpx 8rpx rgba(82, 196, 26, 0.2);
        }
      }
      
      .qrcode-section {
        margin-bottom: 32rpx;
        
        .qrcode-label {
          display: block;
          font-size: 30rpx;
          color: #333;
          margin-bottom: 20rpx;
          font-weight: 500;
        }
        
        .qrcode-container {
          display: inline-block;
          padding: 24rpx;
          background: #f9f9f9;
          border-radius: 16rpx;
          border: 2rpx solid #eee;
          box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
          
          .qrcode-image {
            width: 300rpx;
            height: 300rpx;
          }
        }
      }
      
      .reservation-info {
        text-align: left;
        margin-bottom: 32rpx;
        background: #f9f9f9;
        border-radius: 16rpx;
        padding: 24rpx;
        
        .info-item {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .info-label {
            font-size: 28rpx;
            color: #666;
            width: 160rpx;
          }
          
          .info-value {
            flex: 1;
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }
        }
      }
      
      .qrcode-tips {
        .tips-text {
          font-size: 26rpx;
          color: #ff6b35;
          font-weight: 500;
        }
      }
    }
    
    .qrcode-footer {
      padding: 24rpx 32rpx 40rpx;
      display: flex;
      justify-content: space-between;
      gap: 24rpx;
      
      .save-btn, .confirm-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 30rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
        }
      }
      
      .save-btn {
        background: #f0f0f0;
        border: none;
        color: #333;
      }
      
      .confirm-btn {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        border: none;
        color: white;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 图标字体
.iconfont {
  font-family: "iconfont";
}

.icon-location::before { content: "\e65b"; }
.icon-map::before { content: "\e65c"; }
.icon-close::before { content: "\e65d"; }
.icon-success::before { content: "\e65e"; }
</style>
